<template>
  <view class="list-fors">
    <block v-for="(item,index) in list" :key="index">
      <view class="checked" @click="onSelect(item)">
        <view class="ced">
          <view class="rgc">
            <text :class="item.isSelect?'active':''"></text>
          </view>
        </view>
        <view class="name">{{item.userPname}}</view>
        <view class="phone" @click.stop="$api.makePhoneCall(item.userPhone)">{{item.userPhone}}</view>
        <view class="id">{{item.userPid | filtrAsterisk}}</view>
      </view>
    </block>
  </view>
</template>

<script>
import { asterisk } from '@/common/base'
export default {
  name : 'index' ,
  props:{
    list:{
      type:Array,
      default:[]
    }
  },
  filters: {
    //身份证星号
    filtrAsterisk(num){
      return asterisk(num,4,8,14)
    }
  },
  methods: {
    //是否要勾选操作
    onSelect(item){
      this.$emit('select',item)
    }
  }
}
</script>

<style scoped lang="scss">
.checked{
  padding:0 21rpx;
  height:96rpx;
  line-height:96rpx;
  position: relative;
  display: flex;
  align-items: center;
  .rgc{
    width: 21rpx;
    height: 21rpx;
    border: 1rpx solid #1E58FF;
    border-radius: 50%;
    position: relative;
    .active{
      position: absolute;
      display: inline-block;
      width: 11rpx;
      height: 11rpx;
      background: #1E58FF;
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
  }
  &:before{
    content: "";
    width: 647rpx;
    height: 2rpx;
    background: #E7E5E5;
    position: absolute;
    bottom: 0;
    left: 0;
    margin:0 20rpx 0 21rpx;
  }
  .name,.phone,.id{
    height: 22rpx;
    font-size: 28rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #444444;
    line-height: 24rpx;


  }
  .name{
    padding:0 50rpx 0 16rpx;
    width:30%;
  }
  .phone{
    width:30%;
  }
  .id{
    padding:0 0rpx 0 46rpx;
    width:40%;
  }
}
.list-fors{
  max-height:500px;
  overflow-y: scroll;
}
</style>
